<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Login Page</title>
<link href='css/bootstrap.min.css' rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
/* Override some defaults */
html, body {
	background-color: #eee;
}

body {
	padding-top: 40px;
}

.container {
	width: 300px;
}

/* The white background content wrapper */
.container>.content {
	background-color: #fff;
	padding: 20px;
	margin: 0 -20px;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

.login-form {
	margin-left: 65px;
}

legend {
	margin-right: -50px;
	font-weight: bold;
	color: #404040;
}
</style>

</head>
<body>

<div style="margin:0 auto;">
	<div class="container">
		<div class="content">
			<div class="row">
				<div class="login-form">
					<h2>Login</h2>
					<form id="loginForm" method="post" autocomplete="off">
						<fieldset>
							<div class="clearfix">
								<input type="text" placeholder="请输入统一认证号" id="usernumber" name="usernumber"
									autofocus="autofocus">
							</div>
							<div class="clearfix">
								<input type="password" placeholder="请输入密码" id="password" name="password">
							</div>
							<input id="loginBtn"  class="btn btn-primary" type="button" value="登录"  onclick="userLogin()" />
							<input id="loginReset" class="btn" type="reset" value="重置" />
						</fieldset>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
function userLogin(){
	$.ajax({
			//几个参数需要注意一下
			type : "POST",//方法类型
			dataType : "text",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去
			/*
			dataType:
				要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
				xml：返回XML文档，可用JQuery处理。
				html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
				script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
				json：返回JSON数据。
				jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
				text：返回纯文本字符串。
			 */
			url : "/user/login",//url
			data : $('#loginForm').serialize(),//这个是form表单中的id   jQuery的serialize()方法通过序列化表单值
			success : function(data) {
				console.info(data);
				console.info(data.retcode);
				result = eval('(' + data + ')');
				if (result.retcode == "200" ) {
					alert(result.retmsg);
				}else{
					alert(result.retmsg);
				}
			},
			error : function(data) {
				alert("登录失败");
			}
		});
	}
</script>



</body>
</html>